<template>
  <div ref="question" class="question">
    <svg class="icon" aria-hidden="true" @click="goBack">
      <use xlink:href="#icon-fanhui"></use>
    </svg>
    <textarea rows="2" type="text" placeholder="点击此处
添加一个封面标题" v-model="survey.name"></textarea>
    <div class="img">
      <svg class="icon" aria-hidden="true">
        <use xlink:href='#icon-tupian'></use>
      </svg>
      <input type="file" accept="image/*"
      @change="resizeImage($event)">
    </div>
    <span>添加背景图片</span>
  </div>
</template>

<script>
import {uploadImage} from '@/api/image'

export default {
  name: 'surveyIndex1',
  data () {
    return {
    }
  },
  props: [
    'survey'
  ],
  methods: {
    goBack () {
      this.$router.go(-1)
    },
    next () {
      if (this.survey.name !== '') {
        this.$router.push({name: 'surveyIndex2'})
      } else {
        this.$store.dispatch('showTips', {
          show: true,
          message: '请添加一个标题'
        })
      }
    },                                    // 下一步，进入选择题型页
    resizeImage (e) {
      let file = e.target.files[0]
      window.lrz(file)
      .then(rst => {
        this.$refs.question.style.backgroundImage = `url(${rst.base64})`
        return rst
      })
      .then(rst => {
        uploadImage(rst.formData).then(rst => {
          let imageUrl = rst.data.data
          this.survey.imgUrl = imageUrl
        })
      })
    }                                    // 上传题目背景图片
  }
}
</script>

<style lang="scss" scoped>
.question {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.icon {
  width: 44px;
  height: 44px;
  color: #007aff;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 160px;
}
p {
  text-align: center;
  font-size: 48px;
  color: #999;
}
.img {
  position: relative;
  width: 200px;
  height: 150px;
  background-color: #bbb;
  opacity: 0.5;
  margin: 0 auto;
  margin-top: 245px;
  .icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #666;
    margin: 0;
  }
  input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
}
textarea {
  text-align: center;
  display: block;
  width: 580px;
  font-size: 48px;
  margin: 0 auto;
  border: none;
  color: #999;
  background: rgba(#000, 0);
  resize: none;
  &::-webkit-input-placeholder {
    color: #999;
    font-size: 48px;
    text-align: center;
  }
}
span {
  display: block;
  text-align: center;
  font-size: 32px;
  color: #bec0dd;
  margin-top: 10px;
  font-weight: lighter;
}
</style>

